<template>
	<view class="per-info">
		<view class="item head">
			<text>头像上传</text>
			<view class="right">
				<upload-btn
					:icon-info="{width: '80rpx', icon: avatarUrlHandle()}"
					type="image"
					@chooseFile="importHead"
				></upload-btn>
				<!-- <image class="head-image" v-if="!upload_image" :src="head_image?api.xiaodeObsUrl+head_image:`/static/${isStudent?options.sex==1?'stu1':'stu2':'te1'}.png`" mode="aspectFill"></image>
				<image class="head-image" v-else :src="head_image?head_image:`/static/${isStudent?options.sex==1?'stu1':'stu2':'te1'}.png`" mode="aspectFill"></image> -->
				<image class="icon" src="/static/you.png" mode="aspectFit"></image>
			</view>
		</view>
		<!-- <view class="item" @click="editPage('name')">
			<view>
				<text class="name">昵称</text>
				<text class="content">
					昵称4568
				</text>
			</view>
			<image class="icon right-icon" src="/static/you.png" mode="aspectFit"></image>
		</view> -->
		<view class="item" @click="editPage('pass')">
			<view>
				<text class="name">修改密码</text>
				<text class="content">
					
				</text>
			</view>
			<image class="icon right-icon" src="/static/you.png" mode="aspectFit"></image>
		</view>
		<view class="item" @click="addSecret()">
			<view>
				<text class="name">密码安全</text>
				
			</view>
			<view>
				<text class="content" style="margin-right: 40rpx" v-if="!isExistence">
					前往设置密保问题
					<i class="dot"></i>
				</text>
				<image class="icon right-icon" src="/static/you.png" mode="aspectFit"></image>
			</view>
			
		</view>
		<view class="item" @click="generateCode()" v-if="isStudent">
			<view>
				<text class="name">我的二维码</text>
			</view>
			<image class="icon right-icon" src="/static/you.png" mode="aspectFit"></image>
		</view>
		<view class="stu-btn-text" @click="changeRole">
			退出登录
		</view>
		<uni-transition mode-class="fade"
			:styles="utils.transitionStyles.bg"
			:show="picker_show || show_qrcode" @click="show_qrcode=picker_show=false">
		</uni-transition>
		<uni-transition mode-class="slide-bottom"
			:styles="picker_style"
			:show="picker_show">
			<view class="picker-show">
				<uni-datetime-picker
					type="date"
					:value="single"
					start="2021-3-20"
					end="2021-6-20"
					@change="change"
				/>
				
			</view>
		</uni-transition>
		<uni-transition mode-class="fade"
			:styles="utils.transitionStyles.fade"
			:show="show_qrcode">
			<view class="stu-qrcode popup-top">
				<tki-qrcode
					ref="stQqrcode"
					:val="code_text"
					:size="200"
					unit="rpx"
					background="#FFFFFF"
					foreground="#000000"
					
					icon=""
					:iconSize="60"
					:lv="3" 
					:onval="true"
					:loadMake="true"
					@result="qrR" />
			</view>
		</uni-transition>
	</view>
</template>
<script>
import uploadBtn from '../student/components/select-upload-file.vue'
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
export default {
	components: {
		tkiQrcode,
		uploadBtn
	},
    data() {
        return {
			picker_style: {
				'height': '600rpx',
				'width': '100%',
				'position': 'fixed',
				
			},
			picker_show: false,
			single: "2022-3-1",
			head_image: '',
			upload_image: false,
			userInfo: {},
			isStudent: true,
			isExistence: {},
			options: {},

			code_text: '',
			show_qrcode: false,
			show_data: true,
        }  
    },
	onShow(){
		
		this.getAnswer()

	},
	onLoad(options){
		if(options.head){
			this.head_image = options.head;
		}
		if(options.usertype){
			this.isStudent = false;
		}
		this.options = options;
		// 上传之后刷新页面
		// #ifdef APP-PLUS
		let image = uni.getStorageSync('xd_head_image') || '';
		if(image){
			this.userInfo = getApp().globalData.userInfo;
			this.upload_image = false;
			
			this.head_image = this.userInfo.avatarUrl || '';
			uni.removeStorageSync('xd_head_image')
		}
		// #endif
	},
	methods: {
		avatarUrlHandle(){
			let str = '',
			userType = this.isStudent?2:1,
			sex = this.options.sex
			str = this.utils.headImage({avatarUrl: this.head_image, userType: userType, sex: sex})
			return str
		},
		qrR() {
		},
		generateCode(){
			this.api.get('user/getParentBinDingCode').then(res=>{
				this.code_text = res.data.qrCode+'';
				this.show_qrcode = true;
			})
			
		},
		change(){
			
		},
		getAnswer(){
			this.userInfo = getApp().globalData.userInfo;

			if(this.userInfo.id && !this.userInfo.account) return // 使用用户id
			if(!this.userInfo.account) {
				setTimeout(()=>{
					this.getAnswer()
				}, 200)
				return;
			};
			this.api.get(secretProtection/isExistence,{
				account: this.userInfo.account
			}).then(res=>{
				if(res.data.state != 'ok') return;
				this.isExistence = res.data.isExistence
			})
		},
		editPage(type){
			uni.navigateTo({
				url: '/pages/personalInfo/edit-password?type='+type
			})
		},
		uploadImage(){
			uni.chooseImage({
				count: 1, 
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: (res) => {
					let list = res.tempFiles;
					
					this.head_image = list[0].path;
					// #ifdef APP-PLUS
					uni.setStorageSync('xd_head_image', this.head_image)
					// #endif
					let images = [{uri: this.head_image}];
					this.importHead(images)
				}
			});
			
		},
		importHead(type, list, sendList){
			let image = sendList[0].path
			let token  = uni.getStorageSync('tokenObj').token;

			this.api.post('user/importHead', {
				head: image
			}).then(res=>{
				if(res.data.state == 'ok'){
					this.head_image = image
					this.utils.showToast('上传成功')
				}
			})
		},
		changeRole(){
			uni.closeSocket({
				code: 1000
			});
			uni.removeStorageSync('tokenObj');
			uni.reLaunch({
				url: '/pages/index/login'
			})
			uni.$off('login', ()=>{})
		},
		addSecret(){
			let stu = this.isStudent?1:0, exi = this.isExistence?1:0;
			uni.navigateTo({
				url: '/pages/personalInfo/add-secret?isStudent='+stu + '&isExistence=' + exi
			})
		}
	}
}
</script>
<style lang="less">
	.per-info{
		padding: 24rpx 32rpx;
		.head, .date{
			justify-content: space-between;
			.right{
				display: flex;
				align-items: center;
			}
		}
		.head-image{
			width: 80rpx;
			height: 80rpx;
			margin-right: 16rpx;
			border-radius: 10rpx;
		}
		.icon{
			width: 28rpx;
			height: 28rpx;
		}
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			border-bottom: 2rpx solid #F2F2F2;
			&.date{
				border-bottom: none;
				.left{
					display: flex;
					align-items: center;
				}
			}
			.name{
				width: 120rpx;
			}
			.content{
				margin-left: 48rpx;
				position: relative;
				.dot{
					position: absolute;
					top: -10rpx;
					right: -20rpx;
					width: 20rpx;
					height: 20rpx;
					border-radius: 10rpx;
					background: #d9001b;
				}
			}
		}
		.stu-btn-text{
			margin-top: 100rpx;
			width: 100%;
			text-align: center;
			font-size: 28rpx;
		}
		.picker-show{
			background-color: #FFFFFF;
			bottom: 600rpx;
		}
	}
	.stu-qrcode{
		display: inline-block;
		width: auto;
		padding: 24rpx;
		border-radius: 16rpx;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #FFFFFF;
		box-sizing: border-box;
		font-size: 0;
	}
</style>